<template>
    <div class="SalesProductlist flex  bs ">
        <el-table class="width" :data="orderDetails" v-loading="sDetailLeading" @row-click="getProductID">
            <el-table-column v-if="checked.checked1 || checked.checked2" type="expand">
                <template #default="tolist">
                    <div m="4">
                        <el-table v-if="checked.checked1" :data="tolist.row.purchaseorder">
                            <el-table-column width="250" />
                            <el-table-column width="150" />
                            <el-table-column width="130" />
                            <el-table-column width="150" />
                            <el-table-column width="80" />
                            <el-table-column label="Qty" prop="Qtynumber" width="80" />
                            <el-table-column width="80" />
                            <el-table-column label="Profit" prop="Profit" width="100" />
                            <el-table-column width="100" />
                            <el-table-column label="Leading" prop="leading_name" width="150" />
                            <el-table-column width="200" />
                            <el-table-column width="150" />
                            <el-table-column width="150" />
                        </el-table>
                        <el-table v-if="checked.checked2" :data="tolist.row.shipping">
                            <el-table-column width="250" />
                            <el-table-column width="150" />
                            <el-table-column width="130" />
                            <el-table-column width="150" />
                            <el-table-column width="80" />
                            <el-table-column label="Qty" prop="Qtynumber" width="80" />
                            <el-table-column width="80" />
                            <el-table-column label="State" prop="State" width="100" />
                            <el-table-column width="100" />
                            <el-table-column label="CreateTime" prop="create_time" width="150" />
                            <el-table-column width="200" />
                            <el-table-column width="150" />
                            <el-table-column width="150" />
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <!-- model下拉 -->
            <el-table-column fixed label="Model" width="180">
                <template v-slot="product_name_pi">
                    <el-select v-model="product_name_pi.row.product_name_pi" :disabled="sorderState !== 1 ? true : false"
                        @focus="() => { search('') }" :remote-method="search" remote remote-show-suffix
                        @change="() => { emits('insertId', product_name_pi) }" filterable placeholder="model">
                        <el-option v-for="item in modelList" :key="item.label" :label="item.label"
                            :value="`${item.label}|${item.value}`" />
                    </el-select>
                </template>
            </el-table-column>
            <!-- brand下拉 -->
            <el-table-column label="Brand" width="150">
                <template v-slot="Brand_name">
                    <el-select v-model="Brand_name.row.Brand_name" :disabled="sorderState !== 1 ? true : false"
                        @focus="() => { search1('') }" :remote-method="search1" remote remote-show-suffix filterable
                        placeholder="brand">
                        <el-option v-for="item in brandList" :key="item.label" :label="item.label"
                            :value="`${item.label}|${item.value}`" />
                    </el-select>
                </template>
            </el-table-column>
            <!-- 描述与产品名一致，直接绑定产品名 -->
            <el-table-column label="Description" width="130">
                <template v-slot="product_description_pi">
                    <el-input :value="product_description_pi.row.product_name_pi.split('|')[0]"
                        :disabled="sorderState !== 1 ? true : false" placeholder="description" />
                </template>
            </el-table-column>
            <el-table-column label="State" width="150">
                <template v-slot="State">
                    <el-input disabled v-model="State.row.state_text" placeholder="state" />
                </template>
            </el-table-column>
            <el-table-column label="Weight" width="80">
                <template v-slot="weight">
                    <el-input v-model="weight.row.weight" :disabled="sorderState !== 1 ? true : false"
                        placeholder="weight" />
                </template>
            </el-table-column>
            <el-table-column label="Qty" width="80">
                <template v-slot="quantity">
                    <el-input v-model="quantity.row.quantity" :disabled="sorderState !== 1 ? true : false"
                        placeholder="qty" />
                </template>
            </el-table-column>
            <el-table-column label="Price" width="80">
                <template v-slot="price">
                    <el-input @input="() => { emits('changePrice', price) }" v-model="price.row.price"
                        :disabled="sorderState !== 1 ? true : false" placeholder="price" />
                </template>
            </el-table-column>

            <el-table-column label="Profit %" width="100">
                <template v-slot="profit">
                    <el-input disabled v-model="profit.row.profit" placeholder="profit" />
                </template>
            </el-table-column>
            <el-table-column label="Cost" width="100">
                <template v-slot="cost">
                    <el-input disabled v-model="cost.row.cost" placeholder="cost" />
                </template>
            </el-table-column>
            <el-table-column label="Leading" width="150">
                <template v-slot="leadingtime">
                    <el-select v-model="leadingtime.row.leadingtime" @focus="() => { emits('getleading') }"
                        :disabled="sorderState !== 1 ? true : false" filterable placeholder="leading">
                        <el-option v-for="item in leadingList" :key="item" :label="item" :value="item" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="Condition" width="200">
                <template v-slot="product_condition">
                    <el-select v-model="product_condition.row.product_condition" @focus="() => { emits('getCondition') }"
                        :disabled="sorderState !== 1 ? true : false" filterable placeholder="condition">
                        <el-option v-for="item in conditionList" :key="item.text" :label="item.text" :value="item.text" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="relaredDoc" width="150">
                <template v-slot="related_doc">
                    <el-input v-model="related_doc.row.related_doc" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="Operation" width="150">
                <template v-slot="operation">
                    <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF"
                        title="Are you sure to delete this?" @confirm="() => { deleteProduct(operation) }"
                        @cancel="() => { emits('cancelEvent', 'Cancel delete') }">
                        <template #reference>
                            <el-button style="width: 60%;background-color:#6193D2;color: #fff;border: none;"
                                type="danger">Delete</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>

const props = defineProps({
    sDetailLeading: Boolean,
    state: Boolean,
    sorderState: Number,
    checked1: Boolean,
    checked2: Boolean,
    orderDetails: Object,
    modelList: Object,
    brandList: Object,
    leadingList: Object,
    conditionList: Object,
    checked: Object
})
const emits = defineEmits(['getModel', 'getBrand', 'resetproduct', 'resetbrand', 'getProductID', 'deleteProduct', 'changePrice', 'cancelEvent', 'insertId', 'getleading', 'getCondition'])


// MODEL的产品方法
const search = (val) => {
    emits('getModel', val)
}
// BRAND品牌方法 
const search1 = (val) => {
    emits('getBrand', val)
}
const getProductID = (row) => {
    emits('getProductID', row)
}
// 删除产品
const deleteProduct = (operation) => {
    emits('deleteProduct', operation)
}

</script>

<style lang="less">
.SalesProductlist {
    border-radius: 10px;
    box-sizing: border-box;


    // .el-input__inner {
    //     font-family: 'swis'
    // }

    .el-table__body {
        width: 100% !important;
    }

    .el-table__header {
        width: 100% !important;
    }

    .width {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        height: 36vh;
    }

}
</style>